<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
            <el-form-item label="服务区" prop="status">
               <el-tree-select
                 v-model="queryParams.serviceId"
                 :data="deptTreeData"
                 :props="{ value: 'id', label: 'label', children: 'children' }"
                 :render-after-expand="false"
                 show-checkbox
                 value-key="id"
                 check-strictly
                 placeholder="请选择服务区"
                 class="with-300"
                 clearable
             />
            </el-form-item>
            <el-form-item label="店铺名称" prop="shopName">
               <el-input
                   v-model="queryParams.shopName"
                   placeholder="请输入店铺名称"
                   clearable
                   class="with-240"
               />
             </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
       <!-- 表格数据 -->
        <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="店铺名称" prop="shopName"/>
            <el-table-column label="店长名称" prop="shopManagerName"/>
            <el-table-column label="联系方式" prop="phonenumber"/>
            <el-table-column label="所属服务区" prop="serviceName"/>
            <el-table-column label="所属行政区" prop="provinceName"/>
            <el-table-column label="地址" prop="address"/>
            <el-table-column label="营业时间" prop="businessHours"/>
            <el-table-column label="门店人数" prop="employeeNum"/>
            <el-table-column label="门店面积" prop="shopArea"/>
            <el-table-column label="创建时间" prop="createTime"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                  <el-button link type="primary" icon="Search" @click="lookDetails(scope.row)" v-hasPermi="['remoteInspection:videoInspection:view']">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getShopData"
        />
        <!-- 查看 -->
        <el-dialog title="视频巡检" v-model="detailsDialog" width="800px" append-to-body>
            <el-select v-model="areaValue" @change="areaSelectChange" placeholder="请选择区域" clearable style="width: 200px;">
               <el-option v-for="item in areaList" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
            <el-row :gutter="20">
                <el-col :span="18">
                    <div class="video-area">
                        <div class="video">暂无连接设备</div>
                        <div class="video-control">
                            <span @click="handleRetreat">
                                <svg-icon icon-class="shuaxin" style="height: 20px; width: 20px;"/>
                            </span>
                            <span @click="handleRetreat">
                                <svg-icon icon-class="pause" style="height: 15px; width: 15px;"/>
                            </span>

                            <span class="time" @click="handleRetreat">
                                <i>2024-09-20</i>
                                <i>实时</i>
                            </span>
                            <span @click="handleRetreat">
                                <svg-icon icon-class="shengyin" style="height: 20px; width: 20px;"/>
                            </span>
                            <span @click="handleSnapshot">
                                <svg-icon icon-class="camera" style="height: 20px; width: 20px;"/>
                            </span>
                            <span @click="handleRetreat">对讲</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="img-area">待接入设备</div>
                </el-col>
            </el-row>
        </el-dialog>
        <!-- 快拍 -->
        <el-dialog title="抓拍" v-model="snapshotDialog" width="800px">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div style="display: flex;justify-content: center;align-items: center;height: 100%">待接入设备</div>
                </el-col>
                <el-col :span="12">
                    <el-form ref="snapshotRef" :model="snapshotFormData" :rules="snapshotFormRules" label-width="80px">
                        <el-form-item label="店名" prop="shopName">
                            <el-input v-model="snapshotFormData.shopName" disabled placeholder="请输入店名" />
                        </el-form-item>
                        <el-form-item label="点检项" prop="checkType">
                            <el-select v-model="snapshotFormData.checkType" clearable placeholder="请选择点检项" >
                                <el-option v-for="item in checkList" :label="item.label" :value="item.value" :key="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="处理人" prop="handlerUser">
                            <el-select v-model="snapshotFormData.handlerUser" clearable placeholder="请选择处理人" >
                                <el-option v-for="item in handlerList" :label="item.userName" :value="item.userId" :key="item.userId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="抄送" prop="carbonUserArr">
                            <el-select v-model="snapshotFormData.carbonUserArr" clearable placeholder="请选择抄送人" multiple>
                                <el-option v-for="item in handlerList" :label="item.userName" :value="item.userId" :key="item.userId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="到期日" prop="expirationTime">
                            <el-date-picker
                                style="width: 100%"
                                v-model="snapshotFormData.expirationTime"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                type="date"
                                clearable
                                placeholder="请选择日期"
                            />
                        </el-form-item>
                        <el-form-item label="问题反馈" prop="remarks">
                            <el-input
                                v-model="snapshotFormData.remarks"
                                :rows="3"
                                type="textarea"
                                placeholder="请输入反馈问题"
                            />
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <template #footer>
            <div class="dialog-footer">
               <el-button @click="snapshotDialog = false">取 消</el-button>
               <el-button type="primary" @click="submitSnapshot">确 定</el-button>
            </div>
         </template>
        </el-dialog>
    </div>
</template>

<script setup name="videoInspection">
import { listUser } from "@/api/system/user";
import useUserStore from '@/store/modules/user'
import { getShopList } from "@/api/system/shop";
import { addInspectPoint } from "@/api/remoteInspection/videoInspection";
import { onMounted } from "vue";

const loading = ref(false);
const snapshotRef = ref(null);
const detailsDialog = ref(false);
const snapshotDialog = ref(false);
const areaValue = ref('');
const total = ref(0);
const queryParams = reactive({
    pageNum: 1,
    pageSize: 10,
    shopName:"",
    serviceId:""
})
const areaList = ref([
    {
        label: "东区-收银台",
        value: "1",
    },
    {
        label: "东区-北门",
        value: "2",
    },
    {
        label: "东区-诚锦记",
        value: "3",
    },
    {
        label: "东区-二楼楼梯",
        value: "4",
    },
])
const checkList = ref([
    {
        label: "收银巡检",
        value: 4,
    },
    {
        label: "卫生情况",
        value: 0,
    },
    {
        label: "人员穿着",
        value: 1,
    },
    {
        label: "物品摆放",
        value: 2,
    },
    {
        label: "玩手机",
        value: 3,
    },
    {
        label: "其他",
        value: 5,
    },
])
const handlerList = ref([])

const snapshotFormData = reactive({
    shopId: "",
    shopName: "",
    checkType: "",
    handlerUser: "",
    carbonUserArr: [],
    carbonUser: "",
    expirationTime: "",
    remarks: "",
    type: 1
});
const snapshotFormRules = ref({
    shopName: [ { required: true, message: '请输入店名', trigger: 'blur' } ],
    checkType: [ { required: true, message: '请选择点检项', trigger: 'change' } ],
    handlerUser: [ { required: true, message: '请选择处理人', trigger: 'change' } ],
    carbonUserArr: [ { required: true, message: '请选择抄送人', trigger: 'change' } ],
    expirationTime: [ { required: true, message: '请选择到期日', trigger: 'change' } ],
    remarks: [ { required: true, message: '请选择问题反馈', trigger: 'change' } ],
})
const rowData = ref({})
const tableData = ref([]);

onMounted(()=>{
    getHandlerData()
    getShopData()
})
const deptTreeData = computed(()=>{
   return useUserStore().deptTreeData
})
// 获取处理人下拉数据
const getHandlerData = () =>{
    listUser(queryParams).then(res =>{
        res.rows.forEach(item => {
            handlerList.value.push({
                userId: item.userId,
                userName: item.userName
            })
        });
    })
}
//查询店铺列表
const getShopData = () =>{
  loading.value = true;
  getShopList(queryParams).then(response => {
    if (response.code === 200) {
      tableData.value = response?.rows || [];
      total.value = response?.total || 0;
    }
    loading.value = false;
  }).catch((err) => (loading.value = false));
}
// 搜索
const handleQuery = () =>{
    queryParams.pageNum = 1;
    getShopData()
}
// 重置
const resetQuery= () =>{
    Object.assign(queryParams, {
        pageNum: 1,
        pageSize: 10,
        shopName:"",
        serviceId:""
    })
    getShopData();
}

//多选框选中数据
const handleSelectionChange = (selection) =>{

}

//查看
const lookDetails = (row) =>{
    detailsDialog.value = true
    rowData.value = row
}

//视频巡检区域切换
const areaSelectChange = () =>{

}
//抓拍
const handleSnapshot = () =>{
    snapshotDialog.value = true
    Object.assign(snapshotFormData, {
        shopId: rowData.value.shopId,
        shopName: rowData.value.shopName,
        checkType: "",
        handlerUser: "",
        carbonUserArr: [],
        carbonUser: "",
        expirationTime: "",
        remarks: "",
        type: 1
    })
}

//抓拍——确定
const submitSnapshot = () =>{
    snapshotRef.value.validate((valid, fields) => {
        snapshotFormData.carbonUser = snapshotFormData.carbonUserArr?.length > 1 ? snapshotFormData.carbonUserArr.join(",") : snapshotFormData.carbonUserArr.join("")
        let params = {
            shopId: snapshotFormData.shopId,
            shopName: snapshotFormData.shopName,
            checkType: snapshotFormData.checkType,
            handlerUser: snapshotFormData.handlerUser,
            carbonUser: snapshotFormData.carbonUser,
            expirationTime: snapshotFormData.expirationTime,
            remarks: snapshotFormData.remarks,
            type: snapshotFormData.type
        }
        if (valid) {
            addInspectPoint(params).then(res =>{
                if(res.code == 200){
                    snapshotDialog.value = false
                    ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                }else{
                    ElMessage({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
        } else {
          console.log('error submit!', fields)
        }
    })
}
//后退30秒
const handleRetreat = () =>{
    ElMessage({
        message: '待接入设备',
        type: 'success',
  })
}
</script>

<style lang="scss" scoped>
.video-area{
    position: relative;
    .video{
        height: 500px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .video-control{
        width: 100%;
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: center;
        span{
            padding: 5px 10px;
            border-radius: 5px;
            background-color: rgba($color: #000000, $alpha: 0.8);
            color: #fff;
            margin-right: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        span:last-child{
            margin-right: 0;
        }
        span.time{
            i{
                font-style: normal;
            }
            i:last-child{
                margin-left: 50px;
                color: orange;
            }
        }
    }
}
.img-area{
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee;
}
:deep .el-form{
    .el-form-item{
        .el-form-item__label{
            justify-content: flex-start;
        }
    }
 }
</style>